<template>
	<section>
		<el-table style="margin-top:20px;" :data="button.subButtons">
			<el-table-column label="名称">
				<template slot-scope="scope">{{scope.row.name}}</template>
			</el-table-column>
			<el-table-column label="类型">
				<template slot-scope="scope">{{scope.row.type}}</template>
			</el-table-column>
			<el-table-column label="子菜单">
				<template slot-scope="scope">{{scope.row.subButtons.length}}</template>
			</el-table-column>
			<el-table-column label="操作" width="90">
				<template slot-scope="scope">
					<icon class="table-icon" name="pencil" @click.native="edit(scope.row)" scale="1.2"></icon>
					<icon class="table-icon" name="remove" @click.native="remove(scope.row)" scale="1.2"></icon>
				</template>
			</el-table-column>
		</el-table>
		<el-col :span="24" align="right" style="margin-top: 15px;">
			<el-button @click.native="create">
				<icon name="plus"></icon>
			</el-button>
		</el-col>

		<WxButton ref="wxbutton" v-on:submit="submit" :subbutton="true" :editButton="editSubButton"></WxButton>
	</section>
</template>

<script>
	import WxButton from './WxButton.vue';
	export default {
		name:'subbutton-edit',
		components:{WxButton},
		props:['button'],
		data(){
			return {
				editSubButton:undefined,
			}
		},
		methods:{
			edit(subbutton){
				this.editSubButton = subbutton;
				setTimeout(()=>{
					this.$refs.wxbutton.initialize();
				},100);
				this.$refs.wxbutton.initialize();
			},
			remove(subbutton){
				this.editSubButton = undefined;
				const index = this.button.subButtons.indexOf(subbutton);
				this.button.subButtons.splice(index,1);
			},
			create(){
				setTimeout(()=>{
					this.$refs.wxbutton.initialize();
				},100);
			},
			submit(button){
				if(button.editing){
					const index = this.button.subButtons.indexOf(this.editSubButton);
					this.button.subButtons[index] = button;
				}else{
					this.button.subButtons.push(button);
				}
			},
		},
	}
</script>

<style lang="scss"></style>
